<!--
 * @Author: wangding
 * @Date: 2020-11-03 09:38:48
 * @LastEditTime: 2021-02-22 09:24:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\inverter\flowModal.vue
-->
<template>
    <div>
        <el-dialog
        :title="$t('device.inverter.js_role_setting')"
        :visible="newVisibleFlow"
        width="50%"
        @close="()=>{$store.commit('setNewVisibleFlow',false)}"
        >
            <div style="margin-bottom:40px;">
                <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' >
                    <template #visiable="{data}">
                        <a href="javascript:;" class="hover-a-link" style="color:#ED7523;" v-if='userType != 2' @click='changeIs(data.sid,data.visiable)'>{{returnIs(data.visiable)}}</a>
                        <span v-else>{{returnIs(data.visiable)}}</span>
                    </template>
                    <template #salerType="{data}">
                        {{returnUserType(data.salerType)}}
                    </template>
                </baseTable>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
export default {
    components: {
        baseTable
    },
    props: {
        flowModalWifuSn:{
            type:String,
            default:''
        },
        textDataList:{
            type:Object,
            default:() =>{return {}}
        }
    },
    data() {
        return {
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('alarm.wifiSn'),
                value: 'wifiSN',
                slot: 'wifiSN'
            },
            {
                title: this.$t('sale.buyPage.salerType'),
                value: 'salerType',
                slot: 'salerType',
            },
            {
                title: this.$t('sale.buyPage.salerName'),
                value: 'salerName',
                slot: 'salerName'
            },{
                title: this.$t('salePage.tradeTime'),
                value: 'tradeTime',
                slot: 'tradeTime',
            },{
                title: this.$t('salePage.visiable'),
                value: 'visiable',
                slot: 'visiable',
                min_width:'120'
            }],
            size:10,
            current:1,
            total:1
        };
    },
    computed: {
        newVisibleFlow(){
            return this.$store.state.sysStore.newVisibleFlow
        },
        userType(){
            return localStorage.getItem('userType')
        }
    },
    watch: {
        flowModalWifuSn:{
            handler(nv,ov){
                if(nv){
                    this.saleGetSalFlow()
                }
            }   
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        async changeIs(id,visiable){
            let res = await this.API.saleEditSalFlow({
                id,
                visiable:visiable==0?1:0
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.saleGetSalFlow()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        returnUserType(val){
            let code = ''
            this.textDataList['SALER_TYPE'].forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        returnIs(val){
            let code = ''
            this.textDataList['IS_PUBLIC'].forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        async saleGetSalFlow(){
            this.loading = true
            let res = await this.API.saleGetSalFlow({
                wifiSN:this.flowModalWifuSn,
                size:this.size,
                current:this.current
            })
            this.total = res.total
            this.dataRows = res.rows || []
            this.loading = false
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.deviceGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.deviceGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
